<template>
    <h1>你好！</h1>
    <!-- <div>
        <el-row type="flex" justify="space-between" class="mb-20">
            <div style="width: 49%">
                <span class="title-line">
                        装船作业
                </span>
                <div>
                    <el-form :inline="true" :model="load" class="search-form" style="margin-top:10px"
                             label-width="40px">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="时间">
                                    <date-slot :startDate.sync="load.search_GTE_createDateTime"
                                               :endDate.sync="load.search_LTE_createDateTime" dateType="yyyy-MM-dd"
                                               middle="至"></date-slot>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" icon="el-icon-search" @click="getLoad">查 询</el-button>
                                <el-button @click="handleRouterPush({path: '/work/query/load',name: '装船查询'})">更 多
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="index-border">
                    <el-row type="flex" justify="space-between">
                        <div>总计划：<span class="index-span">{{ loadList.total }}</span> 艘</div>
                        <div style="color: #eeeeee;">单位：艘次</div>
                    </el-row>
                    <div>
                        装船计划TEU: <span class="index-span">{{ loadList.planTeu }} </span>
                        | 已作业TEU: <span class="index-span">{{ loadList.workedTeu }} </span>
                        | 未作业TEU: <span class="index-span">{{ loadList.noWorkTeu }}</span>
                    </div>
                    <div class="mt-10">
                        <div id="index-load" class="chart-style"></div>
                    </div>
                </div>
            </div>
            <div style="width: 49%">
                <span class="title-line">
                        卸船作业
                </span>
                <div>
                    <el-form :inline="true" :model="unload" class="search-form" style="margin-top:10px"
                             label-width="40px">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="时间">
                                    <date-slot :startDate.sync="unload.search_GTE_createDateTime"
                                               :endDate.sync="unload.search_LTE_createDateTime" dateType="yyyy-MM-dd"
                                               middle="至"></date-slot>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" icon="el-icon-search" @click="getUnload">查 询</el-button>
                                <el-button @click="handleRouterPush({path: '/work/query/unload',name: '卸船查询'})">更 多
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="index-border">
                    <el-row type="flex" justify="space-between">
                        <div>总计划：<span class="index-span">{{ unloadList.total }}</span> 艘</div>
                        <div style="color: #eeeeee;">单位：艘次</div>
                    </el-row>
                    <div>
                        卸船计划TEU: <span class="index-span">{{ unloadList.planTeu }} </span>
                        | 已作业TEU: <span class="index-span">{{ unloadList.workedTeu }} </span>
                        | 未作业TEU: <span class="index-span">{{ unloadList.noWorkTeu }}</span>
                    </div>
                    <div class="mt-10">
                        <div id="index-unload" class="chart-style"></div>
                    </div>
                </div>
            </div>
        </el-row>
        <el-row type="flex" justify="space-between">
            <div style="width: 49%">
                <span class="title-line">
                     残损箱
                </span>
                <div>
                    <el-form :inline="true" :model="damaged" class="search-form" style="margin-top:10px"
                             label-width="40px">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="时间">
                                    <date-slot :startDate.sync="damaged.search_GTE_createDateTime"
                                               :endDate.sync="damaged.search_LTE_createDateTime" dateType="yyyy-MM-dd"
                                               middle="至"></date-slot>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" icon="el-icon-search" @click="getDamaged">查 询</el-button>
                                <el-button @click="handleRouterPush({path: '/work/query/damaged',name: '残损箱查询'})">更 多
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="index-border">
                    <el-row type="flex" justify="space-between">
                        <div>
                            总残损箱: <span class="index-span">{{ damagedList.total }} </span>
                            | 卸船残损箱: <span class="index-span">{{ damagedList.xc }} </span>
                            | 装船残损箱: <span class="index-span">{{ damagedList.zc }}</span>
                        </div>
                        <div style="color: #eeeeee;">单位：TEU</div>
                    </el-row>
                    <div class="mt-10">
                        <div id="index-damaged" class="chart-style"></div>
                    </div>
                </div>
            </div>
            <div style="width: 49%">
                <span class="title-line">
                        账单
                </span>
                <div>
                    <el-form :inline="true" :model="bill" class="search-form" style="margin-top:10px"
                             label-width="40px">
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="时间">
                                    <date-slot :startDate.sync="bill.search_GTE_accountMonth"
                                               :endDate.sync="bill.search_LTE_accountMonth" dateType="yyyy-MM-dd"
                                               middle="至"></date-slot>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" icon="el-icon-search" @click="getBill">查 询</el-button>
                                <el-button @click="handleRouterPush({path: '/work/query/bill',name: '账单查询'})">更 多
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="index-border">
                    <el-row type="flex" justify="space-between">
                        <div>
                            总艘次: <span class="index-span">{{ billList.totalShiptime }} </span> 艘
                            | 总理箱量: <span class="index-span">{{ billList.totalTeu }} </span> TEU
                        </div>
                        <div style="color: #eeeeee;">单位：艘/TEU</div>
                    </el-row>
                    <div>账单: <span
                        style="color: darkorange;font-size: 16px;font-weight: bold">{{ billList.bill }}</span> 元
                    </div>
                    <div class="mt-10">
                        <div id="index-bill" class="chart-style"></div>
                    </div>
                </div>
            </div>
        </el-row>
    </div> -->
</template>
<script>
    import dateSlot from '@/components/date/dateSlot'
    import {
        indexLoad,
        indexUnload,
        indexDamaged,
        indexBill
    } from "../../api/shipPlan/shipPlan";
    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入柱状图组件
    require("echarts/lib/chart/bar");
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/line");
    require("echarts/lib/chart/pie");
    export default {
        name: "first",
        components: { dateSlot },
        data() {
            return {
                load: {
                    search_GTE_createDateTime: '',
                    search_LTE_createDateTime: '',
                },
                unload: {
                    search_GTE_createDateTime: '',
                    search_LTE_createDateTime: '',
                },
                damaged: {
                    search_GTE_createDateTime: '',
                    search_LTE_createDateTime: '',
                },
                bill: {
                    search_GTE_accountMonth: '',
                    search_LTE_accountMonth: '',
                },
                loadList: {},
                unloadList: {},
                damagedList: {},
                billList: {},
            }
        },
        mounted() {
            // this.loadData()
        },
        methods: {
            loadData() {
                this.getLoad()
                this.getUnload()
                this.getDamaged()
                this.getBill()
            },
            getLoad() {
                let params = this.$assist.copySearchConditions(this.load)
                params.search_EQ_portCode = 'ZC'
                indexLoad(params).then(res => {
                    this.loadList = res.data
                    let list = this.loadList.plan
                    let loadList = echarts.init(
                        document.getElementById("index-load"),
                        "macarons"
                    );
                    loadList.setOption({
                        title: {
                            text: '计划完成情况',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['已完成计划', '作业中计划', '未作业计划']
                        },
                        series: [
                            {
                                name: '计划完成情况',
                                type: 'pie',
                                label: {
                                    normal: {
                                        formatter: '{b}: {c} ({d}%) ',
                                    }
                                },
                                data: [
                                    { value: list.complete, name: '已完成计划' },
                                    { value: list.operation, name: '作业中计划' },
                                    { value: list.noWork, name: '未作业计划' },
                                ]
                            }
                        ]
                    })
                })
            },
            getUnload() {
                let params = this.$assist.copySearchConditions(this.unload)
                params.search_EQ_portCode = 'XC'
                indexUnload(params).then(res => {
                    this.unloadList = res.data
                    let list = this.unloadList.plan
                    let unloadList = echarts.init(
                        document.getElementById("index-unload"),
                        "macarons"
                    );
                    unloadList.setOption({
                        title: {
                            text: '计划完成情况',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['已完成计划', '作业中计划', '未作业计划']
                        },
                        series: [
                            {
                                name: '计划完成情况',
                                type: 'pie',
                                label: {
                                    normal: {
                                        formatter: '{b}: {c} ({d}%) ',
                                    }
                                },
                                data: [
                                    { value: list.complete, name: '已完成计划' },
                                    { value: list.operation, name: '作业中计划' },
                                    { value: list.noWork, name: '未作业计划' },
                                ]
                            }
                        ]
                    })
                })
            },
            getDamaged() {
                let params = this.$assist.copySearchConditions(this.damaged)
                indexDamaged(params).then(res => {
                    this.damagedList = res.data
                    let date = [], zc = [], xc = []
                    for (let i = 0; i < this.damagedList.aaData.length; i++) {
                        const el = this.damagedList.aaData[i]
                        date.push(el.date)
                        zc.push(el.zc)
                        xc.push(el.xc)
                    }
                    let damagedList = echarts.init(
                        document.getElementById("index-damaged"),
                        "macarons"
                    );
                    damagedList.setOption({
                        title: {
                            text: '装卸船残损箱统计',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            bottom: 10,
                            left: 'center',
                            data: ['装船', '卸船']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: date
                        },
                        dataZoom: [
                            {
                                show: true,
                                start: 0,
                                end: 100
                            },
                            {
                                type: 'inside',
                                start: 0,
                                end: 100
                            },
                            {
                                show: true,
                                yAxisIndex: 0,
                                filterMode: 'empty',
                                width: 30,
                                height: '75%',
                                showDataShadow: false,
                                left: '93%'
                            }
                        ],
                        series: [
                            {
                                name: '装船',
                                type: 'bar',
                                data: zc
                            },
                            {
                                name: '卸船',
                                type: 'bar',
                                data: xc
                            }
                        ]
                    })
                })
            },
            getBill() {
                let params = this.$assist.copySearchConditions(this.bill)
                indexBill(params).then(res => {
                    this.billList = res.data
                    let billList = this.billList
                    let bill = echarts.init(
                        document.getElementById("index-bill"),
                        "macarons"
                    );
                    bill.setOption({
                        title: {
                            text: '艘次/TEU',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            x: 'center',
                            y: 'bottom',
                            data: ['卸船', '装船']
                        },
                        calculable: true,
                        series: [
                            {
                                name: '艘次',
                                type: 'pie',
                                radius: [50, 80],
                                center: ['30%', '50%'],
                                data: [
                                    { value: billList.shiptime.xc, name: '卸船' },
                                    { value: billList.shiptime.zc, name: '装船' },
                                ]
                            },
                            {
                                name: 'TEU',
                                type: 'pie',
                                radius: [50, 80],
                                center: ['70%', '50%'],
                                data: [
                                    { value: billList.teu.xc, name: '卸船' },
                                    { value: billList.teu.xc, name: '装船' },
                                ]
                            }
                        ]
                    })
                })
            },
            handleRouterPush(val) {
                sessionStorage.setItem('load-params', JSON.stringify(this.load))
                sessionStorage.setItem('unload-params', JSON.stringify(this.unload))
                sessionStorage.setItem('damaged-params', JSON.stringify(this.damaged))
                sessionStorage.setItem('bill-params', JSON.stringify(this.bill))
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            }
        }
    }
</script>
<style>
    .index-border {
        border: 1px solid #eeeeee;
        padding: 5px;
        font-size: 14px;
    }

    .index-span {
        color: #409EFF;
        font-size: 16px;
        font-weight: bold;
    }

    .chart-style {
        width: 100%;
        height: 300px;
    }
</style>
